﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>焦点</title>
    <style>
        body{
            background: rgba(225,225,225,0.5);
        }
        .fcs{
            font-size: 18px;
            font-family: "黑体";
            color: black;
            width:100px;
            height:100px;
            border:1px solid black;
            margin:5px;
            text-align: center;
            line-height: 100px;
        }
        #c1{
            float:left;
            overflow: hidden;
        }
        #c2{
            float:left;
            width: 400px;
            height: 200px;
        }
        #c2 div{
            float:left;
        }
        #c3{
            float:left;
            overflow: hidden;
        }
        #c4{
            clear: both;
            overflow: hidden;
        }
        #c4 div{
            float:left;
        }
        .current{
            background-color: red;
        }
    </style>
</head>
<body class="a b c d">
<div id="c1">
    <div class="fcs current_font" id="first" title="Bood.html"></div>
</div>
<div id="c2">
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
</div>
<div id="c3">
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
</div>
<div id="c4">
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs"></div>
    <div class="fcs" id="text"></div>
</div>
<div id="NexPage" class="NexPage"></div>
<script type="text/javascript" src="focusNew.js"></script>
<script>
    focusControl.mainInit({
        data : [
            {name : "c1",
                rule : "down",
                focusStyle : "" ,
                rightModule : "c2,1",
                bottomModule:"c4,0",
                doFocus : function(){
                    this.fcs.innerText = "我在模块一";
                },
                doBlur : function(){
                    this.fcs.innerText = "";
                    //this.fcs.removeClass("current");
                },
                doClick : function(){
                    this.fcs.style.backgroundColor = "blue"
                }
            },
            {name : "c2",
                num : 12,
                rule : "right,3",
                focusStyle : "frame" ,
                leftModule : "c1,1",
                rightModule : "c3,1",
                bottomModule:"c4,1",
                doFocus : function(){
                    this.fcs.innerText = "我在模块二";
                },
                doBlur : function(obj){
                    this.fcs.innerText = "";
                    //focusControl.mod0.focus[1].fcs.removeClass("current");
                },
                doClick : function(){
                    this.fcs.style.backgroundColor = "green"
                }
            },
            {name : "c3",
                num : 5,
                rule : "down,1",
                focusStyle : "frame" ,
                leftModule : "c2,1",
                bottomModule:"c4,1",
                doFocus : function(){
                    this.fcs.innerText = "我在模块三";
                },
                doBlur : function(){
                    this.fcs.innerText = "";
                },
                doClick : function(){
                    this.fcs.style.backgroundColor = "orange"
                }
            },
            {name : "c4",
                num : 5,
                rule : "right,5",
                focusStyle : "frame" ,
                topModule : "c1,1",
                doFocus : function(){
                    this.fcs.innerText = "我在模块四";
                },
                doBlur : function(){
                    this.fcs.innerText = "";
                },
                doClick : function(){
                    this.fcs.style.backgroundColor = "orange"
                }
            }
        ],
        lastPage : "https://www.baidu.com/",
        firstFocus : "c1,0",
        method : "onkeydown"
    });
    focusControl["c1"].focus[0].doClick = function(obj){
        this.fcs.style.backgroundColor = "black"
    };
    focusControl["c2"].focus[0].alive = false;
        focusControl.removeModule("c4");
        focusControl.addModule([{name : "c4",
            num : 5,
            rule : "right,5",
            focusStyle : "frame" ,
            topModule : "c1",
            doFocus : function(){
                this.fcs.innerText = "我在模块四";
            },
            doBlur : function(){
                this.fcs.innerText = "";
            },
            doClick : function(){
                this.fcs.style.backgroundColor = "orange"
            }
        }]);
    //document.getElementById("first").removeClass("111").addClass("current");
    console.log(focusControl);
</script>
</body>
</html>